<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>${siteName!""}后台管理系统主页</title>
    <#include "../common/header.ftl"/>

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="/system/index">${siteName!""}</a>
            </div>
            <div class="lyear-layout-sidebar-scroll">
                <#include "../common/left-menu.ftl"/>
            </div>

        </aside>
        <!--End 左侧导航-->

        <#include "../common/header-menu.ftl"/>

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-primary">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">备份文件</p>
                                    <p class="h3 text-white m-b-0">${databaseBackupTotal!"0"}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                                class="mdi mdi-database fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-danger">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">用户总数</p>
                                    <p class="h3 text-white m-b-0">${userTotal!"0"}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                                class="mdi mdi-account fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-success">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">当前在线用户</p>
                                    <p class="h3 text-white m-b-0">${onlineUserTotal!"0"}</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                                class="mdi mdi-account-multiple fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-3">
                        <div class="card bg-purple">
                            <div class="card-body clearfix">
                                <div class="pull-right">
                                    <p class="h6 text-white m-t-0">操作日志</p>
                                    <p class="h3 text-white m-b-0">${operatorLogTotal!"0"}条</p>
                                </div>
                                <div class="pull-left"><span class="img-avatar img-avatar-48 bg-translucent"><i
                                                class="mdi mdi-keyboard-close fa-1-5x"></i></span></div>
                            </div>
                        </div>
                    </div>
                </div>
                <#if ylrc_auth != 1>
                    <div class="row" id="show-copyright">
                        <div class="col-sm-12 col-lg-12">
                            <div class="card bg-primary">
                                <div class="card-body clearfix">
                                    <div class="pull-left">
                                        <p class="h6 text-white m-t-0">${showTipsText}</p>
                                        <p class="h3 text-white m-b-0">${showTipsUrlText}<a href="${showTipsUtl}"
                                                                                            style="color:red;margin-right:20px;">https://www.baidu.com</a><a
                                                    href="javascript:void(0)" class="btn btn-danger"
                                                    id="order-auth-btn">${showTipsBtnText}</a></p>
                                        <p class="h5 text-white m-b-0"></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </#if>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header"><h4>签收快递订单</h4></div>
                            <div class="card-body">
                                <canvas id="chart-vbar-2" width="400" height="250"></canvas>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header"><h4>网点拥有快递员</h4></div>
                            <div class="card-body">
                                <canvas id="chart-vbar-3" width="400" height="250"></canvas>
                            </div>
                        </div>
                    </div>

                </div>
                <#--系统最新操作日志显示-->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header">
                                <h4>系统最近操作日志</h4>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>操作人</th>
                                            <th style="width:400px;">操作内容</th>
                                            <th>操作时间</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <#if operatorLogs??>
                                            <#list operatorLogs as operatorLog>
                                                <tr>
                                                    <td>${operatorLog_index+1}</td>
                                                    <td>${operatorLog.operator}</td>
                                                    <td>${operatorLog.content}</td>
                                                    <td>${operatorLog.createTime}</td>
                                                </tr>
                                            </#list>
                                        </#if>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>
<#include "../common/footer.ftl"/>
<script type="text/javascript" src="/admin/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/admin/js/main.min.js"></script>
<script type="text/javascript" src="/admin/js/Chart.js"></script>
<script type="text/javascript">

    function transformationIn(num) {
        var newValue;
        switch (num) {
            case 1:
                newValue = "一月";
                break;
            case 2:
                newValue = "二月";
                break;
            case 3:
                newValue = "三月";
                break;
            case 4:
                newValue = "四月";
                break;
            case 5:
                newValue = "五月";
                break;
            case 6:
                newValue = "六月";
                break;
            case 7:
                newValue = "七月";
                break;
            case 8:
                newValue = "八月";
                break;
            case 9:
                newValue = "九月";
                break;
            case 10:
                newValue = '十月';
                break;
            case 11:
                newValue = '十一月';
                break;
            case 12:
                newValue = '十二月';
                break;
            default:
                break;
        }
        return newValue;
    }

    var monthArr = new Array();
    var countArr = new Array();


    <#if orderCountAndMonthByNowYearList?size gt 0>
    <#list orderCountAndMonthByNowYearList as orderCountAndMonthByNowYear>
    monthArr.push(${orderCountAndMonthByNowYear[0]})
    countArr.push(${orderCountAndMonthByNowYear[1]})
    </#list>
    </#if>

    $(monthArr).each(function (index) {
        monthArr[index] = transformationIn(monthArr[index]);
    })


    new Chart($("#chart-vbar-2"), {
        type: 'bar',
        data: {
            labels: monthArr,
            datasets: [{
                label: "单数",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: countArr
            }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });

    var branchesUsersUserNameArr = new Array();
    var peopleCountingArr = new Array();

    <#if branchesUsers?size gt 0>
    <#list branchesUsers as branchesUser>
    branchesUsersUserNameArr.push('${branchesUser.getUsername()}')
    peopleCountingArr.push(${branchesUser.getCountCourier()})
    </#list>
    </#if>

    new Chart($("#chart-vbar-3"), {
        type: 'bar',
        data: {
            labels: branchesUsersUserNameArr,
            datasets: [{
                label: "人数",
                backgroundColor: "rgba(51,202,185,0.5)",
                borderColor: "rgba(0,0,0,0)",
                hoverBackgroundColor: "rgba(51,202,185,0.7)",
                hoverBorderColor: "rgba(0,0,0,0)",
                data: peopleCountingArr
            }
            ]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    $(document).ready(function () {

    });

</script>
</body>
</html>